<template>
  <div class="profit-compute">
    <comheader pageTitle="模拟收益" :isBack="true"></comheader>
    <div class="profit-compute-input">
      <ul>
        <li class="border-1px">
          <span>出借金额</span>
          <input type="number" min="0" placeholder="请输入投资金额" v-model="amount">
          <span>元</span>
        </li>
        <li class="border-1px">
          <span>借款利率</span>
          <input type="number" min="0" placeholder="请输入借款利率" v-model="rate">
          <span>%</span>
        </li>
        <li class="border-1px">
          <span>出借期限</span>
          <input type="number" min="0" placeholder="请输入出借期限" v-model="lendValue">
          <span>天</span>
        </li>
        <li class="border-1px">
          <span>回款方式</span>
          <span>按月付息，到期还本</span>
        </li>
      </ul>
    </div>
    <spliter :height="10"></spliter>

    <div class="profit-compute-output">
      <div class="profit-compute-output-header">
        <img :src="left" alt="">
        <p>预期收益</p>
        <img :src="right" alt="">
      </div>
      <div class="profit-compute-output-content">
        <p>{{ profit }}</p>
        <p>本息合计收益：<span>{{ totalProfit }}</span></p>
      </div>
    </div>
    <spliter :height="10"></spliter>
    <div class="profit-compute-recommend">
      <p>分秒推荐标</p>
      <div class="profit-compute-recommend-good">
        <recommend-good></recommend-good>
      </div>
    </div>
  </div>
</template>

<script>
  import comheader from 'components/common/comHead'
  import spliter from 'components/common/spliter'
  import recommendGood from 'components/recommendGood'
  const TWEEN = require('tween.js')

  export default {
    data () {
      return {
        amount: null,
        lendValue: null,
        rate: null,
        profit: 0,
        totalProfit: 0,
        left: require('assets/mnsy_left@2x.png'),
        right: require('assets/mnsy_right@2x.png'),
        inteset: 0
      }
    },
    watch: {
      amount () {
        this.getProfit()
      },
      lendValue () {
        this.getProfit()
      },
      rate () {
        this.getProfit()
      }
    },
    methods: {
      getProfit () {
        if (!this.amount || !this.lendValue || !this.rate) {
          return
        }
        this.inteset = this.amount * (this.rate / 100) * (this.lendValue / 360) // 计算收益

        this.profit = this.inteset
        this.totalProfit = this.profit + Number.parseInt(this.amount)
        var vm = this
        const animate = function (time) {
          requestAnimationFrame(animate)
          TWEEN.update(time)
        }
        new TWEEN.Tween({ tweeningNumber: 0, tweeningNumber2: 0 })
          .easing(TWEEN.Easing.Quadratic.Out)
          .to({ tweeningNumber: vm.profit, tweeningNumber2: vm.totalProfit }, 500)
          .onUpdate(function () {
            vm.profit = this.tweeningNumber.toFixed(2)
            vm.totalProfit = this.tweeningNumber2.toFixed(2)
          })
          .start()
        animate()
      }
    },
    components: {
      comheader,
      spliter,
      recommendGood
    }
  }
</script>

<style lang='scss'>
  @import '../../common/scss/tool.scss';
  @import '../../common/scss/_variable.scss';

  .profit-compute {
    font-size: 32px;
    &-input {
      padding: 0 30px;
      li {
        display: flex;
        height: 108px;
        line-height: 108px;
        color: $base-333;
        @include border-1px(#{$base-e5e5e5});
        span:nth-child(1) {
          margin-right: 30px;
        }
        input {
          flex: 1 0 auto;
          outline: none;
        }
      }
    }
    &-output {
      &-header {
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 60px 0;
        p {
          font-size: 34px;
          color: $base-666;
          margin: 0 20px;
        }
        img {
          width: 180px;
          height: 2px;
        }
      }
      &-content {
        text-align: center;
        p:nth-child(1) {
          font-size: 62px;
          color: $base-ff6c00;
        }
        p:nth-child(2) {
          margin: 90px 0 60px 0;
          font-size: 30px;
          color: $base-999;
          span {
            color: $base-ff6c00;
          }
        }
      }
    }

    &-recommend {
      padding-bottom: 80px;
      &>p {
        text-align: center;
        font-size: 32px;
        color: $base-ff6c00;
        margin: 40px 0;
      }
      &-good {
        width: 90%;
        margin: 0 auto;
      }
    }
  }
</style>
